{{#>base title=data.page.echarts_bar}}

    {{#*inline "pageContent"}}

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.echarts_bar}}
                </h3>

                <div class="tabs-wrap">
                    <ul  class="nav nav-tabs">
                        <li>
                            <a href="echarts-bar.html" >标准柱状图</a>
                        </li>
                        <li>
                            <a href="echarts-bar-horizon.html" >横向柱状图</a>
                        </li>
                        <li class="active">
                            <a href="echarts-bar-stack.html" >堆积柱状图</a>
                        </li>
                        <li>
                            <a href="echarts-bar-custom.html" >彩虹柱状图</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet box default">

                    <div class="portlet-body">
                        <div  class="chart-default " >
                            <div class="chart-body" id="my_chart"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="markdown">
                    <h3>Javascript</h3>
<pre><code class="javascript">require('../../plugins/echarts/module');

var chart = $p.echarts("my_chart", {
    type: "bar"
});

chart.load({
    name: "PV",
    horizon: true,
    columns: ['百度', '谷歌', '360搜索', '搜狗', '必应', '雅虎', '网易有道'],
    rows: [{
        name: "上海",
        value: [735, 310, 234, 135, 548, 148, 114],
        stack: "浏览量(PV)"
    }, {
        name: "北京",
        value: [435, 110, 84, 95, 108, 98, 74],
        stack: "浏览量(PV)"
    }, {
        name: "广州",
        value: [255, 120, 184, 195, 208, 198, 174],
        stack: "浏览量(PV)"
    }]
});</code></pre>

                    {{>fixtures/echarts-footer}}

                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call([
                "modules/echarts-bar/app",
                "plugins/echarts/loader"], function(app) {
                app.page.horizonStack();
            });
        </script>
    {{/inline}}

{{/base}}
